<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员面板 - 校园活动报名平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/custom-icons.css" rel="stylesheet">
    <style>
        .container {
            max-width: 960px;
        }
        .header {
            padding: 2rem 0;
            text-align: center;
        }
        .card {
            margin-bottom: 1.5rem;
        }
        .footer {
            margin-top: 3rem;
            padding: 1.5rem 0;
            color: #777;
            border-top: 1px solid #e5e5e5;
            text-align: center;
        }
        .nav-item {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>校园活动报名平台</h1>
            <p class="lead">管理员控制面板</p>
        </div>

        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">管理员面板</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="activities.html">活动列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="admin.html">管理员面板</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="profile.html">个人信息</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#" id="logoutBtn">退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="row mb-4">
            <div class="col-md-12">
                <ul class="nav nav-tabs" id="adminTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button" role="tab" aria-controls="users" aria-selected="true">用户管理</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="activities-tab" data-bs-toggle="tab" data-bs-target="#activities" type="button" role="tab" aria-controls="activities" aria-selected="false">活动管理</button>
                    </li>
                </ul>
                <div class="tab-content" id="adminTabContent">
                    <div class="tab-pane fade show active" id="users" role="tabpanel" aria-labelledby="users-tab">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">用户管理</h5>
                                <div id="usersList" class="mt-3"></div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="activities" role="tabpanel" aria-labelledby="activities-tab">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">活动管理</h5>
                                <div id="adminActivitiesList" class="mt-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>© 2025 校园活动报名平台</p>
        </footer>
    </div>

    <!-- 用户详情模态框 -->
    <div class="modal fade" id="userDetailModal" tabindex="-1" aria-labelledby="userDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userDetailModalLabel">用户详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="userDetailContent">
                    <!-- 用户详情内容将在这里动态加载 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger" id="deleteUserBtn">删除用户</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 活动详情模态框 -->
    <div class="modal fade" id="activityDetailModal" tabindex="-1" aria-labelledby="activityDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="activityDetailModalLabel">活动详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="activityDetailContent">
                    <!-- 活动详情内容将在这里动态加载 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-warning" id="toggleActivityStatusBtn">切换活动状态</button>
                    <button type="button" class="btn btn-danger" id="deleteActivityBtn">删除活动</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let currentUser = null;
        let currentViewUser = null;
        let currentActivity = null;
        const API_BASE_URL = '/api';

        // 页面加载完成后执行
        $(document).ready(function() {
            // 检查登录状态
            checkLoginStatus();

            // 退出登录按钮点击事件
            $('#logoutBtn').on('click', function() {
                logout();
            });

            // 删除用户按钮点击事件
            $('#deleteUserBtn').on('click', function() {
                deleteUser(currentViewUser.id);
            });

            // 切换活动状态按钮点击事件
            $('#toggleActivityStatusBtn').on('click', function() {
                updateActivityStatus(currentActivity.id, !currentActivity.isActive);
            });

            // 删除活动按钮点击事件
            $('#deleteActivityBtn').on('click', function() {
                deleteActivity(currentActivity.id);
            });
        });

        // 检查登录状态
        function checkLoginStatus() {
            const user = localStorage.getItem('currentUser');
            if (user) {
                currentUser = JSON.parse(user);
                // 检查是否是管理员
                if (!currentUser.isAdmin) {
                    alert('您不是管理员，无法访问此页面');
                    window.location.href = 'activities.html';
                    return;
                }
                loadAllUsers();
                loadAllActivities();
            } else {
                // 未登录，跳转到登录页面
                window.location.href = 'login.html';
            }
        }

        // 退出登录
        function logout() {
            localStorage.removeItem('currentUser');
            window.location.href = 'login.html';
        }

        // 加载所有用户
        function loadAllUsers() {
            $.ajax({
                url: API_BASE_URL + '/admin/users',
                type: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        displayUsers(response.data);
                    } else {
                        alert('获取用户列表失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('获取用户列表失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }

        // 加载所有活动
        function loadAllActivities() {
            $.ajax({
                url: API_BASE_URL + '/admin/activities',
                type: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        displayActivities(response.data);
                    } else {
                        alert('获取活动列表失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('获取活动列表失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }

        // 显示用户列表
        function displayUsers(users) {
            const container = $('#usersList');
            container.empty();

            if (users.length === 0) {
                container.html('<p class="text-center">暂无用户</p>');
                return;
            }

            const table = `
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>姓名</th>
                            <th>邮箱</th>
                            <th>手机</th>
                            <th>学号</th>
                            <th>角色</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${users.map(user => `
                            <tr>
                                <td>${user.id}</td>
                                <td>${user.username}</td>
                                <td>${user.name || ''}</td>
                                <td>${user.email || ''}</td>
                                <td>${user.phone || ''}</td>
                                <td>${user.studentId || ''}</td>
                                <td>${user.isAdmin ? '管理员' : '普通用户'}</td>
                                <td>
                                    <button class="btn btn-sm btn-info view-user-btn" data-id="${user.id}">查看</button>
                                    <button class="btn btn-sm btn-danger delete-user-btn" data-id="${user.id}">删除</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
            container.append(table);

            // 绑定查看用户按钮事件
            $('.view-user-btn').on('click', function() {
                const userId = $(this).data('id');
                viewUserDetail(userId);
            });

            // 绑定删除用户按钮事件
            $('.delete-user-btn').on('click', function() {
                const userId = $(this).data('id');
                deleteUser(userId);
            });
        }

        // 显示活动列表
        function displayActivities(activities) {
            const container = $('#adminActivitiesList');
            container.empty();

            if (activities.length === 0) {
                container.html('<p class="text-center">暂无活动</p>');
                return;
            }

            const table = `
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>标题</th>
                            <th>创建者</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>报名截止</th>
                            <th>人数</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${activities.map(activity => `
                            <tr>
                                <td>${activity.id}</td>
                                <td>${activity.title}</td>
                                <td>${activity.creatorName}</td>
                                <td>${new Date(activity.startTime).toLocaleString()}</td>
                                <td>${new Date(activity.endTime).toLocaleString()}</td>
                                <td>${new Date(activity.registrationDeadline).toLocaleString()}</td>
                                <td>${activity.currentParticipants}/${activity.maxParticipants || '不限'}</td>
                                <td>${activity.isActive ? '<span class="text-success">活跃</span>' : '<span class="text-danger">已关闭</span>'}</td>
                                <td>
                                    <button class="btn btn-sm btn-info view-activity-btn" data-id="${activity.id}">查看</button>
                                    <button class="btn btn-sm btn-${activity.isActive ? 'warning' : 'success'} toggle-status-btn" data-id="${activity.id}" data-status="${!activity.isActive}">
                                        ${activity.isActive ? '关闭' : '激活'}
                                    </button>
                                    <button class="btn btn-sm btn-danger delete-activity-btn" data-id="${activity.id}">删除</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
            container.append(table);

            // 绑定查看活动按钮事件
            $('.view-activity-btn').on('click', function() {
                const activityId = $(this).data('id');
                viewActivityDetail(activityId);
            });

            // 绑定切换活动状态按钮事件
            $('.toggle-status-btn').on('click', function() {
                const activityId = $(this).data('id');
                const newStatus = $(this).data('status');
                updateActivityStatus(activityId, newStatus);
            });

            // 绑定删除活动按钮事件
            $('.delete-activity-btn').on('click', function() {
                const activityId = $(this).data('id');
                deleteActivity(activityId);
            });
        }

        // 查看用户详情
        function viewUserDetail(userId) {
            $.ajax({
                url: API_BASE_URL + '/users/' + userId,
                type: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        currentViewUser = response.data;
                        displayUserDetail(currentViewUser);
                        
                        // 显示模态框
                        const modal = new bootstrap.Modal(document.getElementById('userDetailModal'));
                        modal.show();
                    } else {
                        alert('获取用户详情失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('获取用户详情失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }

        // 显示用户详情
        function displayUserDetail(user) {
            const content = `
                <div class="mb-3">
                    <strong>用户ID：</strong> ${user.id}
                </div>
                <div class="mb-3">
                    <strong>用户名：</strong> ${user.username}
                </div>
                <div class="mb-3">
                    <strong>姓名：</strong> ${user.name || '未设置'}
                </div>
                <div class="mb-3">
                    <strong>邮箱：</strong> ${user.email || '未设置'}
                </div>
                <div class="mb-3">
                    <strong>手机：</strong> ${user.phone || '未设置'}
                </div>
                <div class="mb-3">
                    <strong>学号：</strong> ${user.studentId || '未设置'}
                </div>
                <div class="mb-3">
                    <strong>角色：</strong> ${user.isAdmin ? '管理员' : '普通用户'}
                </div>
            `;
            
            $('#userDetailContent').html(content);
            $('#userDetailModalLabel').text('用户详情 - ' + user.username);
            
            // 禁止删除自己
            if (user.id === currentUser.id) {
                $('#deleteUserBtn').prop('disabled', true);
            } else {
                $('#deleteUserBtn').prop('disabled', false);
            }
        }

        // 查看活动详情
        function viewActivityDetail(activityId) {
            $.ajax({
                url: API_BASE_URL + '/activities/' + activityId,
                type: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        currentActivity = response.data;
                        displayActivityDetail(currentActivity);
                        
                        // 显示模态框
                        const modal = new bootstrap.Modal(document.getElementById('activityDetailModal'));
                        modal.show();
                    } else {
                        alert('获取活动详情失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('获取活动详情失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }

        // 显示活动详情
        function displayActivityDetail(activity) {
            const startTime = new Date(activity.startTime).toLocaleString();
            const endTime = new Date(activity.endTime).toLocaleString();
            const deadline = new Date(activity.registrationDeadline).toLocaleString();
            
            const content = `
                <h4>${activity.title}</h4>
                <p class="text-muted">创建者：${activity.creatorName}</p>
                <hr>
                <p>${activity.description}</p>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>活动地点：</strong>${activity.location}</p>
                        <p><strong>开始时间：</strong>${startTime}</p>
                        <p><strong>结束时间：</strong>${endTime}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>报名截止：</strong>${deadline}</p>
                        <p><strong>参与人数：</strong>${activity.currentParticipants}/${activity.maxParticipants || '不限'}</p>
                        <p><strong>活动状态：</strong>${activity.isActive ? '<span class="text-success">活跃</span>' : '<span class="text-danger">已关闭</span>'}</p>
                    </div>
                </div>
            `;
            
            $('#activityDetailContent').html(content);
            $('#activityDetailModalLabel').text('活动详情 - ' + activity.title);
            
            // 更新切换状态按钮文本
            $('#toggleActivityStatusBtn').text(activity.isActive ? '关闭活动' : '激活活动');
        }

        // 删除用户
        function deleteUser(userId) {
            // 不能删除自己
            if (userId === currentUser.id) {
                alert('不能删除自己的账号');
                return;
            }
            
            if (confirm('确定要删除该用户吗？此操作不可恢复！')) {
                $.ajax({
                    url: API_BASE_URL + '/admin/users/' + userId,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.code === 200) {
                            alert('用户删除成功');
                            // 关闭模态框
                            $('#userDetailModal').modal('hide');
                            // 重新加载用户列表
                            loadAllUsers();
                        } else {
                            alert('用户删除失败：' + response.message);
                        }
                    },
                    error: function(xhr) {
                        alert('用户删除失败：' + (xhr.responseJSON?.message || '服务器错误'));
                    }
                });
            }
        }

        // 更新活动状态
        function updateActivityStatus(activityId, isActive) {
            $.ajax({
                url: API_BASE_URL + '/admin/activities/' + activityId + '/status?isActive=' + isActive,
                type: 'PUT',
                success: function(response) {
                    if (response.code === 200) {
                        alert('活动状态更新成功');
                        // 关闭模态框
                        $('#activityDetailModal').modal('hide');
                        // 重新加载活动列表
                        loadAllActivities();
                    } else {
                        alert('活动状态更新失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('活动状态更新失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }

        // 删除活动
        function deleteActivity(activityId) {
            if (confirm('确定要删除该活动吗？此操作不可恢复！')) {
                $.ajax({
                    url: API_BASE_URL + '/activities/' + activityId,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.code === 200) {
                            alert('活动删除成功');
                            // 关闭模态框
                            $('#activityDetailModal').modal('hide');
                            // 重新加载活动列表
                            loadAllActivities();
                        } else {
                            alert('活动删除失败：' + response.message);
                        }
                    },
                    error: function(xhr) {
                        alert('活动删除失败：' + (xhr.responseJSON?.message || '服务器错误'));
                    }
                });
            }
        }
    </script>
</body>
</html> 